<!--
 * Copyright 2019 The Chromium Authors. All rights reserved.  Use of this
 * source code is governed by a BSD-style license that can be found in the
 * LICENSE file.
-->
<!DOCTYPE html>
<html>
<body>
  <video id="video" preload=auto src="/media/bigbuck.webm"></video>
  <video id="secondVideo" preload=auto src="/media/bigbuck.webm"></video>
  <script>
    video.addEventListener('enterpictureinpicture', () => {
      document.title = 'video.enterpictureinpicture';
    });

    video.addEventListener('leavepictureinpicture', () => {
      document.title = 'video.leavepictureinpicture';
    });

    secondVideo.addEventListener('enterpictureinpicture', () => {
      document.title = 'secondVideo.enterpictureinpicture';
    });

    secondVideo.addEventListener('leavepictureinpicture', () => {
      document.title = 'secondVideo.leavepictureinpicture';
    });

    document.addEventListener('visibilitychange', () => {
      document.title = document.visibilityState;
    });

    async function enterPictureInPicture() {
      await video.requestPictureInPicture();
      return true;
    }

    function isInPictureInPicture() {
      return document.pictureInPictureElement == video;
    }

    async function changeVideoSrcToNoAudioTrackVideo() {
      video.src = '/media/engagement/engagement_no_audio_track.webm';
      await video.play();
      return true;
    }

    function isPaused() {
      return video.paused;
    }

    async function playVideo() {
      await video.play();
      return true;
    }

    async function playSecondVideo() {
      await secondVideo.play();
      return true;
    }

    async function addHtmlVideoWithAutoPictureInPicture() {
      document.body.insertAdjacentHTML('beforeend',
        '<video id="htmlVideo" autopictureinpicture></video>');
      htmlVideo.src = '/media/bigbuck.webm';

      await htmlVideo.play();

      htmlVideo.addEventListener('enterpictureinpicture', () => {
        document.title = 'htmlVideo.enterpictureinpicture';
      });

      return true;
    }
  </script>
</body>
</html>
